<template>
  <div>
    <div id="bar3" style="height:300px; width:100%"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { request } from "../network"
export default {
  mounted() {
    this.tactics()
    
  },
  methods: {
    tactics() {
      
      request({
        url: "/apt/tacticsrank",
      }).then((res) => {
        this.bar3 = this.$echarts.init(document.getElementById("bar3"));
        var attackmethodname = [];
        var attackmethodvalue = [];

        for (let item of res.data.data.slice(0, 10)) {
          attackmethodname.push(item.tactics);
          attackmethodvalue.push(item.value);
        }

        var option3 = {
          title: {
            text: "使用攻击技术排行",
            textStyle: {
              color: "#7AFEC6",
            },
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow",
            },
          },

          grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true,
          },
          xAxis: {
            type: "value",
            boundaryGap: [0, 0.01],
          },
          yAxis: {
            type: "category",
            data: attackmethodname,
           axisLabel: {
              color: "#FFFFFF	", 
            },
          },
          series: [
            {
              name: "能力",
              //类型：折线图
              type: "bar",
              //柱体的样式
              itemStyle: {
                normal: {
                  //柱体的颜色
                  //右，下，左，上（1，0，0，0）表示从正右开始向左渐变
                  color: function (params) {
                    console.log(params);
                    var colorList = [
                      ["#c43a30", "#874da2"],
                      ["#FFA783", "#8D3510"],
                      ["#f9d423", "#FFA783"],
                      ["#83FFC0", "#4B8D10"],
                      ["#abecd6", "#fbed96"],
                      ["#108D89", "#83FFE9"],
                      ["#616161", "#9bc5c3"],
                      ["#d7d2cc", "#304352"],
                      ["#a8edea", "#fed6e3"],
                      ["#FFFEFF", "#D7FFFE"],
                    ];
                    var colorItem = colorList[params.dataIndex];
                    return new echarts.graphic.LinearGradient(
                      1,
                      0,
                      0,
                      0,
                      [
                        {
                          offset: 0,
                          color: colorItem[0],
                        },
                        {
                          offset: 1,
                          color: colorItem[1],
                        },
                      ],
                      false
                    );
                  },
                  barBorderRadius: [0, 5, 5, 0],
                },
              },
              data: attackmethodvalue,
            },
          ],
        };
        this.bar3.setOption(option3);
      });
    },
  
    
  },

}
</script>

<style>

</style>